<template>
  <div>0{{ currentNumber }}+</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const currentNumber = ref(0);
const start = 0;
const end = 5;
const duration = 5000;

function animateNumber(start, end, duration) {
  let startTime = null;
  const step = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
    currentNumber.value = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    } else {
      currentNumber.value = end; // Ensure final number is set
    }
  };
  window.requestAnimationFrame(step);
}

onMounted(() => {
  animateNumber(start, end, duration);
});
</script>